<template>
  <div class="Router" :class="{chang:$parent.quanwidth}">
    <img src="../assets/images/before.png" alt="">
    <img src="../assets/images/last.png" alt="" style="right: 0;left: initial;">
    <div class="routerwidp">
      <div class="routerwid">
        <p v-for="i,index in $root.router">
          <router-link :to="{path:i.url,query:{name:i.name,comName:i.comName}}" :class="{active:i.type}">{{i.name}}
          </router-link>
          <img src="../assets/images/images/del_03.png" alt="" v-show="!i.type" @click="$root.router.splice(index,1)">
          <img src="../assets/images/images/del_05.png" alt="" v-show="i.type" @click="lastto(index)">
        </p>
        
      </div>
    </div>

    <!-- <router-link to="">首页sad<img src="../assets/images/images/del_03.png" alt=""> </router-link> -->
  </div>
</template>

<script>
export default {
  name: 'Router',
  props: [],
  data() {
    return {
      ismenu:0
    };
  },
  methods: {
    lastto(idx){
      var comName = this.$root.router[idx].comName;
      if(this.$root.router.length == 1){
        if(comName == 'index') return;
        this.$root.router.splice(idx,1);
        this.$router.push({
          path:'/',
          query:{
            name:'欢迎界面',
            comName:'index'
          }
        });
        return
      };
      this.$root.router.splice(idx,1);
      this.$router.push({
        path:this.$root.router[idx-1].url,
        query:{
          name:this.$root.router[idx-1].name,
          comName:this.$root.router[idx-1].comName
        }
      });
    }
  },
  computed: {},
  mounted() {}
};
</script>
<style scoped>
/* @import '../assets/css/top.css'; */
.Router{ height: 50px;box-sizing: content-box; position: fixed;z-index: 1;width:calc(100% - 90px);min-width: 500px;position: relative;
transition: all .3s ease;left: 90px;top: 60px; border-bottom: 10px solid #f7f6f6;font-size: 16px;color: #000;}
.chang{width:calc(100% - 200px);left: 200px;}
p{position: relative;float: left;margin-top: 13px;word-break: keep-all;}
a{font-size: 14px;margin-right: 10px;
color: #6d6d6d;padding: 3px 10px;border-radius:4px;background: #eaeaea;display: inline-block;}
p img{position: absolute;top: -5px;right: 2px;cursor: pointer;}
a.active{background: #0081f0;color:#fff}
.Router>img{float: left;height: 30px;position: absolute;left: 0;top: 10px;cursor: pointer;}
.Router>div{width: calc(100% - 80px);width: -webkit-calc(100% - 80px);margin: 0 auto;overflow: hidden;height: 50px;}
.Router>div>div{height: 50px;float: left;}
</style>
